<template>
  <div class="common-wrap">
    <div class="entrust">
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :porpModel="true"
        labelWidth="120"
        :saveBtnLoading="saveBtnLoading"
        @submit="onSubmit"
      >
        <template #form-nodeDisplay>
          <!-- <NodeDisplay /> -->
        </template>
      </MyForm>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import i18n from "@/lang/index.js";
import * as api from "@/api/index.js";
import { getSubZhEn, columnFilters } from "@/utils/mUtils.js";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRoute();
const formData = ref({});
const formColumns = ref([
  {
    title: "委托",
    structure: [
      {
        title: "",
        formLayout: "el-row",
        content: [
          {
            labelWidth: "0px",
            type: "slot",
            prop: "nodeDisplay",
            span: 24,
          },
        ],
      },
      {
        title: "基础信息",
        formLayout: "el-row-column",
        content: [
          {
            content: [
              {
                label: "客户代码",
                prop: "customerCode",
                // type: "remote_select",
                placeholder: "请选择客户名称",
                params: {
                  searchKey: "keyword",
                  keyValue: "customerCode",
                  name: "customerNameZh",
                  abbreviation: "customerCode",
                  showCustomizedOption: true,
                  displayKey: {
                    coopTypeStr: "coopTypeStr",
                    customerAbbr: "customerAbbr",
                  },
                  fixedParams: {
                    coopType: "0",
                  },
                },
                paramsKey: {
                  customerNameZh: "customerNameZh",
                },
                apiModule: api.default.common.customers.selectAllCoopList,
              },
              {
                label: "是否保险",
                prop: "insuranceType",
                // type: "label_radio",
                options: [
                  {
                    label: "否",
                    value: 0,
                  },
                  {
                    label: "是",
                    value: 1,
                  },
                ],
              },
              {
                label: "报关方式",
                prop: "customsDeclareTypeCode",
                name: "customsDeclareTypeName",
              },
              {
                label: "派送备注",
                prop: "deliveryRemark",
                // type: "label_input",
                inputType: "textarea",
              },
            ],
          },
          {
            content: [
              {
                label: "SO号",
                prop: "soNo",
                type: "remote_select",
                placeholder: "请选择SO号",
                params: {
                  searchKey: "keyword",
                  keyValue: "soNo",
                  name: "soNo",
                  abbreviation: "bookingNo",
                  showCustomizedOption: true,
                  fixedParams: {
                    isContainSo: true,
                  },
                  displayKey: {
                    customerNameZh: "customerNameZh",
                    lineName: "lineName",
                    lineDetailCode: "lineDetailCode",
                    providerName: "providerName",
                    loadingPortName: "loadingPortName",
                    deliveryPortName: "deliveryPortName",
                  },
                },
                paramsKey: {
                  customerCode: "customerCode",
                  providerName: "providerName",
                  providerCode: "providerCode",
                  vesselName: "vesselName",
                  voyageNo: "voyageNo",
                  loadingPortCode: "loadingPortCode",
                  loadingPortName: "loadingPortName",
                  dischargePortCode: "dischargePortCode",
                  dischargePortName: "dischargePortName",
                  deliveryPortCode: "deliveryPortCode",
                  deliveryPortName: "deliveryPortName",
                  estimatedTimeDeparture: "estimatedTimeDeparture",
                  actualTimeDeparture: "actualTimeDeparture",
                  actualTimeArrivalDischarge: "actualTimeArrivalDischarge",
                  estimatedTimeArrivalDischarge:
                    "estimatedTimeArrivalDischarge",
                  actualTimeArrivalDelivery: "actualTimeArrivalDelivery",
                  estimatedTimeArrivalDelivery: "estimatedTimeArrivalDelivery",
                  goodsTypeName: "goodsTypeName",
                  goodsTypeCode: "goodsTypeCode",
                  containerTypeName: "containerTypeName",
                  containerTypeCode: "containerTypeCode",
                  customsClosingTime: "customsClosingTime",
                },
                apiModule: api.default.oceanFreight.bookingManagement.list,
              },
              {
                label: "渠道名称",
                prop: "subProductId",
                name: "subProductName",
                // type: "remote_select",
                params: {
                  searchKey: "searchKey",
                  keyValue: "id",
                  name: "subProductName",
                  abbreviation: "lineCode",
                  showCustomizedOption: true,
                  queryId: true,
                  displayKey: {
                    mainProductName: "mainProductName",
                    lineDetailDesc: "lineDetailDesc",
                  },
                },
                paramsKey: {
                  subProductName: "subProductName",
                },
                apiModule: api.default.common.product.queryList,
                handleRemoteChange: (val, data, c) => {
                  if (!val) return;
                  goodsTypeArr(data);
                },
              },
              {
                label: "货物类型",
                prop: "goodsTypeCode",
                name: "goodsTypeName",
                // type: "label_select",
                // options: [],
                // props: {
                //   value: "subCode",
                //   label: "subName",
                // },
              },

              {
                label: "内部备注",
                prop: "remark",
                // type: "label_input",
                inputType: "textarea",
              },
            ],
          },
          {
            content: [
              {
                label: "最终目的",
                prop: "destWarehouseCode",
                name: "destWarehouseName",
                detailedProp: "destWarehouseTypeName",
                detailedDisabled: true,
                // type: "remote_select_input",
                params: {
                  searchKey: "searchKey",
                  keyValue: "warehouseCode",
                  name: "warehouseName",
                  abbreviation: "postcode",
                  showCustomizedOption: true,
                  displayKey: {
                    countryName: "countryName",
                    provinceName: "provinceName",
                    cityName: "cityName",
                    areaName: "areaName",
                    address: "address",
                  },
                },
                paramsKey: {
                  destWarehouseName: "warehouseName",
                  destWarehouseTypeCode: "typeCode",
                  destWarehouseTypeName: "typeName",
                  destWarehousePostCode: "postcode",
                  destWarehouseCountryName: "countryName",
                  destWarehouseCountryCode: "countryCode",
                  destWarehouseProvinceName: "provinceName",
                  destWarehouseProvinceCode: "provinceCode",
                  destWarehouseCityCode: "cityCode",
                  destWarehouseCityName: "cityName",
                  destWarehouseAreaName: "areaName",
                  destWarehouseAreaCode: "areaCode",
                  destWarehouseAddress: "address",
                },
                apiModule: api.default.common.warehouse.queryList,
                handleRemoteChange: (val, data, c) => {
                  if (!val) return;
                  formData.value.provinceCityArea = [
                    data.provinceCode,
                    data.cityCode,
                    data.areaCode,
                  ];
                },
              },
              {
                label: "国家/省/市/区",
                propSelectCode: "destWarehouseCountryCode",
                propSelectName: "destWarehouseCountryName",
                propSelectAdd: "countryAdd",
                prop: "provinceCityArea",
                detailedDisabled: true,
                detailedProp: "destWarehousePostCode",
                // type: "label_province_city_area",
                propSelectOptions: [],
                propSelectPlaceholder: "国家",
                labelKey: {
                  destWarehouseCountryName: "destWarehouseCountryName",
                  destWarehouseProvinceName: "destWarehouseProvinceName",
                  destWarehouseCityName: "destWarehouseCityName",
                  destWarehouseAreaName: "destWarehouseAreaName",
                },
                parmasKey: {
                  provinceName: "destWarehouseProvinceName",
                  provinceCode: "destWarehouseProvinceCode",
                  cityName: "destWarehouseCityName",
                  cityCode: "destWarehouseCityCode",
                  areaName: "destWarehouseAreaName",
                  areaCode: "destWarehouseAreaCode",
                },
                propsSelect: {
                  value: "countryCode",
                  label: "countryName",
                  keyAdd: "countryAdd",
                },
                options: [],
                props: {
                  value: "areaCode",
                  label: "areaName",
                  children: "children",
                },
                placeholder: "省/市/区(县)",
                onCascaderChange: (argeObj) => {
                  formData.value = { ...formData.value, ...argeObj };
                },
              },
              {
                label: "",
                prop: "destWarehouseAddress",
                // type: "label_input",
                inputType: "textarea",
              },
              {
                label: "目的国家",
                prop: "destWarehouseAddress",
              },
              {
                label: "分区",
                prop: "destWarehouseAddress",
              },
            ],
          },
          {
            content: [
              {
                label: "件数",
                prop: "pcs",
                // type: "label_number",
              },
              {
                label: "毛重",
                prop: "totalGrossWeight",
                // type: "label_number",
              },
              {
                label: "体积",
                prop: "totalVolume",
                // type: "label_number",
              },
            ],
          },
        ],
      },
      {
        title: "船期信息",
        formLayout: "el-row-column",
        content: [
          {
            content: [
              {
                label: "船司",
                prop: "providerName",
              },
              {
                label: "船名/航次",
                options: [
                  {
                    value: "vesselName",
                  },
                  {
                    value: "voyageNo",
                  },
                ],
              },
            ],
          },
          {
            content: [
              {
                label: "起运港",
                options: [
                  {
                    value: "loadingPortCode",
                  },
                  {
                    value: "loadingPortName",
                  },
                ],
              },

              {
                label: "ETD/ATD",
                options: [
                  {
                    value: "estimatedTimeDeparture",
                  },
                  {
                    value: "actualTimeDeparture",
                  },
                ],
              },
            ],
          },
          {
            content: [
              {
                label: "卸货港",
                options: [
                  {
                    value: "dischargePortCode",
                  },
                  {
                    value: "dischargePortName",
                  },
                ],
              },

              {
                label: "ETA/ATA",
                options: [
                  {
                    value: "estimatedTimeArrivalDischarge",
                  },
                  {
                    value: "actualTimeArrivalDischarge",
                  },
                ],
              },
            ],
          },
          {
            content: [
              {
                label: "目的港",
                options: [
                  {
                    value: "deliveryPortCode",
                  },
                  {
                    value: "deliveryPortName",
                  },
                ],
              },
              {
                label: "ETA/ATA",
                options: [
                  {
                    value: "estimatedTimeArrivalDelivery",
                  },
                  {
                    value: "actualTimeArrivalDelivery",
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        title: "操作",
        formLayout: "el-row",
        content: [
          {
            label: "销售",
            prop: "salesCode",
            name: "salesName",
            type: "label_input_emp_select",
            currRowKey: "salesCode",
            rowKey: "empCode",
            props: {
              salesCode: "empCode",
              salesName: "empName",
            },
          },
          {
            label: "客服",
            prop: "customerServiceCode",
            name: "customerServiceName",
            type: "label_input_emp_select",
            currRowKey: "customerServiceCode",
            rowKey: "empCode",
            props: {
              customerServiceCode: "empCode",
              customerServiceName: "empName",
            },
          },
          {
            label: "港前操作",
            prop: "prePortOpBy",
            name: "prePortOpByName",
            type: "label_input_emp_select",
            currRowKey: "prePortOpBy",
            rowKey: "empCode",
            props: {
              prePortOpBy: "empCode",
              prePortOpByName: "empName",
            },
          },
          {
            label: "单证人员",
            prop: "docOpBy",
            name: "docOpByName",
            type: "label_input_emp_select",
            currRowKey: "docOpBy",
            rowKey: "empCode",
            props: {
              docOpBy: "empCode",
              docOpByName: "empName",
            },
          },
          {
            label: "清关操作",
            prop: "customsClearanceBy",
            name: "customsClearanceByName",
            type: "label_input_emp_select",
            currRowKey: "customsClearanceBy",
            rowKey: "empCode",
            props: {
              customsClearanceBy: "empCode",
              customsClearanceByName: "empName",
            },
          },
          {
            label: "提柜操作",
            prop: "containerPickBy",
            name: "containerPickByName",
            type: "label_input_emp_select",
            currRowKey: "containerPickBy",
            rowKey: "empCode",
            props: {
              containerPickBy: "empCode",
              containerPickByName: "empName",
            },
          },
          {
            label: "港后客服",
            prop: "afterPortOpBy",
            name: "afterPortOpByName",
            type: "label_input_emp_select",
            currRowKey: "afterPortOpBy",
            rowKey: "empCode",
            props: {
              afterPortOpBy: "empCode",
              afterPortOpByName: "empName",
            },
          },
        ],
      },
    ],
  },
]);
const rules = ref({});
const saveBtnLoading = ref(false);
onMounted(() => {
  if (router.query.id) {
    getInfo();
  }
});
const getInfo = () => {
  saveBtnLoading.value = true;
  api.default.oceanFreight.seaFreightExportOrder
    .getInfo(router.query.id)
    .then((res) => {
      formData.value = res.data;
    })
    .finally(() => {
      saveBtnLoading.value = false;
    });
};
const goodsTypeArr = (data) => {
  const arr = data?.goodsTypeCode
    ? data?.goodsTypeCode.split(",").map((item, index) => {
        return {
          subCode: item,
          subName: data.goodsTypeName.split(",")[index],
        };
      })
    : [];
  columnFilters(formColumns.value, "goodsTypeCode").options = arr;
};
const onSubmit = () => {
  saveBtnLoading.value = true;
  const params = {
    ...formData.value,
  };
  api.default.oceanFreight.seaFreightExportOrder
    .edit(params)
    .then((res) => {
      ElMessage.success(i18n.global.t("修改成功"));
      saveBtnLoading.value = false;
    })
    .catch(() => {
      saveBtnLoading.value = false;
    });
};
</script>

<style scoped lang="scss">
.entrust {
  height: 100%;
}
</style>